<template>
    <div class="mr-root">
        <back-header>
            <p class="title">{{$route.params.gameName}}</p>
        </back-header>
        <div class="mr-content">
            <div class="room-infor" v-for="(r,index) in roomList" :key="index">
                <img :src="r.room_src" alt="">
                <div class="room-title">
                    <div class="room-name">{{r.room_name | message}}</div>
                    <div class="nickname">
                        <i></i>
                        <span>{{r.nickname}}</span>
                    </div>
                    <div class="online">
                        <i></i>
                        <span>{{r.online | number}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import BackHeader from '../components/BackHeader'
    export default{
        data(){
            return{
                roomList:[]
            }
        },
        components:{
            BackHeader
        },
        created(){
            this.axios.get(`/douyuapi/RoomApi/live/${this.$route.params.gameId}?offset=0&limit=20`)
                .then(data=>{
                    console.log(this.roomList)
                    this.roomList=this.roomList.concat(data.data.data)
                })
                .catch(err=>{

                })
        }
    }
</script>
<style scoped>
    .room-infor{
        padding-top: 20px;
    }
    img{
        width: 5rem;
        float: left;
        margin-bottom: 15px;
        margin-right: 20px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px rgba(0,0,0,.2);
    }
    .room-title{
        width: 4.1rem;
        float: left;
        margin-bottom: 10px;
    }
</style>
